<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态创建列表</title>
</head>

<body>
  <h3>我的优点</h3>
  <ul id="box"></ul>

  <script>
    //题目：在box元素中动态创建无序列表，自定义列表项内容。
    //思路：创建一个数组，数组内容为列表内容，数组每一个元素都创建一个li标签，再把li标签插入到ul中

    //获取外层ul标签
    var box = document.getElementById('box'),
      //创建一个数组，容纳我的优点
      me = ['帅', '帅', '帅', '帅', '帅', '帅', '帅', '帅', '帅', '帅', '帅', '帅', '帅', '帅', '太多了,先写这些吧,我累了'];

    //循环遍历数组，每一次循环都新建一个li标签，添加标签内容，再把标签插入到ul标签内部
    for (let i = 0; i < me.length; i++) {
      //创建li标签
      var li = document.createElement('li');
      //修改标签内容
      li.innerText = me[i];
      //插入到box底部
      box.appendChild(li);
    }
  </script>
</body>

</html>